<template>
  <div class="cache-rule">
    <div class="cache-rule__top">
      <div class="flex-1 label">文件后缀</div>
      <div class="label w-120px">缓存时间</div>
      <div class="label w-112px">操作</div>
    </div>
    <div class="cache-rule__body">
      <div v-for="(item, index) in list" :key="index" class="rule-list">
        <div class="flex-1 box-border">
          <a-input
            v-model="item.suffix"
            class="ipt-no-border pl-0!"
            placeholder="请输入文件后缀，内容可多个值，区分大小写，用英文逗号隔开"
            :max-length="256"
            readonly></a-input>
        </div>
        <div class="w-120px text-2">
          {{ item.cache_time }}
          {{ getOptionsLabel(cacheTimeOptions, item.cache_unit) }}
        </div>
        <div class="w-112px flex gap-x-6">
          <a-link
            type="text"
            status="normal"
            class="!px-0"
            @click="edit(item, index)">
            编辑
          </a-link>
          <a-link
            type="text"
            status="danger"
            class="!px-0"
            :disabled="readonly"
            @click="handleDelete(index)">
            删除
          </a-link>
        </div>
      </div>
    </div>
    <div class="cache-rule__footer" @click="append">
      <i-icons-table-add />
      新增规则
    </div>
    <add-rule-dialog
      v-model:visible="addState.visible"
      :record="addState.record"
      :is-add="isAdd"
      @refresh="() => emit('refresh')"
      @save="handleSave" />
  </div>
</template>

<script setup lang="ts">
import type { FormInstance } from '@arco-design/web-vue'
import AddRuleDialog from './AddRuleDialog.vue'

interface IEmit {
  (event: 'refresh'): void
  (event: 'save'): void
}

interface IProps {
  validate?: boolean
  readonly?: boolean
}

const emit = defineEmits<IEmit>()
const props = withDefaults(defineProps<IProps>(), {
  validate: true,
  readonly: false
})
const isAdd = ref(false)
const addState = reactive({
  visible: false,
  record: {},
  index: 0
})
const formRefs = ref<FormInstance[]>()
const list = defineModel<any>('list', { required: true })

const handleDelete = (index: number) => {
  list.value.splice(index, 1)
  emit('save')
}
// 新增一项空数据
function append() {
  if (list.value.length >= 20) {
    return
  }
  addState.record = {
    suffix: '',
    cache_time: 1,
    cache_unit: 'd'
  }
  addState.visible = true
  isAdd.value = true
}
const edit = (item: any, index: number) => {
  isAdd.value = false
  addState.visible = true
  addState.record = item
  addState.index = index
}
const handleSave = (form: any) => {
  if (isAdd.value) {
    list.value.push(form)
  } else {
    list.value[addState.index] = form
  }
  emit('save')
}
// 表单验证，外部保存时可调用验证数据有效性
function validateFn() {
  if (!formRefs.value || !props.validate) {
    return
  }
  return Promise.all(formRefs.value.map((item) => item.validate()))
}

watch(
  () => props.validate,
  (val) => {
    if (val) {
      return
    }
    nextTick(() => {
      formRefs.value?.forEach((formInstance) => {
        formInstance.clearValidate()
      })
    })
  }
)

defineExpose({ append, validateFn })
</script>
<style lang="less">
.ipt-no-border {
  @apply !border-none;
}
</style>
<style scoped lang="less">
.cache-rule {
  @apply !w-full rounded;
  border: 1px solid #f3f4f7;
  &__top {
    @apply px-4 py-2  flex items-center gap-x-4 text-[12px] text-4 leading-5 font-semibold;
    border-bottom: 1px solid #f3f4f7;
  }
  &__body {
    @apply flex flex-col max-h-250px overflow-auto;
    .rule-list {
      @apply py-2 px-4 !flex h-12 !flex-row items-center gap-x-4;
      &:not(:last-child) {
        border-bottom: 1px solid #f3f4f7;
      }
      .item {
        @apply px-4;
      }
    }
  }
  &__footer {
    @apply flex-center gap-x-6px h-12 leading-12 text-primary cursor-pointer;
    border-top: 1px solid #f3f4f7;
  }
  &-item {
    &:last-child {
      .a-form-item {
        @apply mb-0;
      }
    }
  }
}
</style>
